<template>
	<div class="goorder">
		<h3>下单付款</h3>
		<el-table :data="list" border>
			<el-table-column label="图片" width="120">
				<template slot-scope="scope">
					<img :src="`${$ip}/api/public/showimg/${scope.row.book.pic}`" min-width="20" height="70"
						style="height: 50PX;width: 80px;" />
				</template>
			</el-table-column>
			<el-table-column prop="book.name" label="商品名称">
			</el-table-column>
			<el-table-column prop="price" label="商品价格">
			</el-table-column>
			<el-table-column sortable prop="num" label="商品数量">
			</el-table-column>
			<el-table-column prop="zprice" label="商品总价">
			</el-table-column>

		</el-table>
		<el-form ref="form" label-width="80px" style="margin-top: 2%;width: 30%;">
			<el-form-item label="昵称">
				<el-input v-model="user.name"></el-input>
			</el-form-item>
			<el-form-item label="电话">
				<el-input v-model="user.phone"></el-input>
			</el-form-item>
			<el-form-item label="地址">
				<el-input v-model="user.addr"></el-input>
			</el-form-item>
		</el-form>
		<div style="display: flex;">
			<p>总价:{{dzj}}</p>
			<el-button @click="doorder()" v-show="!judge">去下单</el-button>
			<el-button v-show="judge" @click="fk()">去付款</el-button>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'pcgoOrder',
		data() {
			return {
				list: [],
				user: {},
				daj: 0,
				judge: false,
				book: [],
				order: {},
				users: {}
			}

		},
		methods: {
			doorder() {
				this.judge = true;
				this.book = this.list;
				this.users = {
					amount: this.dzj,
					ship2name: this.user.name,
					ship2phone: this.user.phone,
					ship2addr: this.user.addr,
					carts: this.book
				}
				console.log(this.users);
				this.$postjson('/api/fore/cart/add2Order', this.users).then((resp) => {
					console.log(resp.data.data.ordid);
					console.log("产生的订当总价:" + resp.data.data.amount);
					this.order = {
						od: resp.data.data.ordid,
						jg: this.dzj
					}
					this.$message({
						showClose: true,
						message: '下单成功,订单号为:' + resp.data.data.ordid
					});
				})
			},
			fk() {
				console.log(this.order);
				console.log(this.list);
				this.$router.push({
					query: {
						dx: this.order,
						sz: this.list
					},
					path: '/pcdoOrder'
				});
			}
		},
		mounted() {
			console.log(this.$route.query.user);
			this.list = this.$route.query.user;
			this.$get('/api/user/shipInfo').then((resp) => {
				console.log(resp.data.data);
				this.user = resp.data.data;
			})
			let kk = 0;
			this.list.forEach((item) => {
				kk += item.price * item.num;
				console.log(item.id);
			})
			this.dzj = kk;
		}
	}
</script>

<style>
	.goorder {
		width: 80%;
		margin: 0 auto;
	}
	.goorder h3{
		text-align:center;
		margin-top:3%;
		margin-bottom: 2%;
	}
	.goorder form{
		margin:  0 auto;
	}
	.goorder p {
		margin-left: 45%;
		margin-top: 0.5%;
	}
	.goorder button{
		border: none;
	}
</style>